/**
 * 此脚本用于生成tabBar图标
 * 提供简单实现，用于解决缺少图标文件的问题
 */

const fs = require('fs');
const path = require('path');
const { createCanvas } = require('canvas');

const tabbarDir = path.join(__dirname, '../assets/images/tabbar');
if (!fs.existsSync(tabbarDir)) {
  fs.mkdirSync(tabbarDir, { recursive: true });
}

const icons = [
  {
    name: 'home',
    svg: (color) => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 20L24 8L40 20V40C40 41.1046 39.1046 42 38 42H10C8.89543 42 8 41.1046 8 40V20Z" stroke="${color}" stroke-width="3" fill="none"/><rect x="18" y="30" width="12" height="12" rx="2" fill="${color}"/></svg>`
  },
  {
    name: 'category',
    svg: (color) => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="8" width="12" height="12" rx="2" fill="${color}"/><rect x="28" y="8" width="12" height="12" rx="2" fill="${color}"/><rect x="8" y="28" width="12" height="12" rx="2" fill="${color}"/><rect x="28" y="28" width="12" height="12" rx="2" fill="${color}"/></svg>`
  },
  {
    name: 'ai-inquiry',
    svg: (color) => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><polygon points="24,6 44,42 4,42" stroke="${color}" stroke-width="3" fill="none"/><circle cx="24" cy="32" r="6" fill="${color}"/></svg>`
  },
  {
    name: 'cart',
    svg: (color) => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="10" y="16" width="28" height="18" rx="2" stroke="${color}" stroke-width="3" fill="none"/><circle cx="16" cy="38" r="3" fill="${color}"/><circle cx="32" cy="38" r="3" fill="${color}"/></svg>`
  },
  {
    name: 'profile',
    svg: (color) => `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="24" cy="18" r="8" stroke="${color}" stroke-width="3" fill="none"/><rect x="10" y="32" width="28" height="10" rx="5" stroke="${color}" stroke-width="3" fill="none"/></svg>`
  }
];

const inactiveColor = '#999';
const activeColor = '#ff6b00';

function svgToPng(svg, filePath) {
  const canvas = createCanvas(48, 48);
  const ctx = canvas.getContext('2d');
  const img = new (require('canvas').Image)();
  img.onload = () => {
    ctx.clearRect(0, 0, 48, 48);
    ctx.drawImage(img, 0, 0, 48, 48);
    const buffer = canvas.toBuffer('image/png');
    fs.writeFileSync(filePath, buffer);
    console.log('Generated:', filePath);
  };
  img.onerror = err => { throw err; };
  img.src = Buffer.from(svg);
}

icons.forEach(icon => {
  // 普通
  svgToPng(icon.svg(inactiveColor), path.join(tabbarDir, `${icon.name}.png`));
  // 高亮
  svgToPng(icon.svg(activeColor), path.join(tabbarDir, `${icon.name}-active.png`));
});

console.log('创建了所有tabBar图标占位符。要获得更好的效果，请替换为专业设计的图标。');

/**
 * 此脚本仅用于演示目的，说明如何生成tabBar图标
 * 实际项目中应使用设计师提供的图标
 * 
 * 基本用法:
 * 1. 安装 canvas 和 fs 包
 * 2. 运行脚本生成图标
 */

/*
// 如果需要实际生成图标，取消注释以下代码

const { createCanvas } = require('canvas');
const fs = require('fs');

// 配置
const iconSize = 24;
const canvasSize = 48;
const outputDir = './src/assets/images/tabbar';

// 创建目录
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// 创建图标函数
function createIcon(name, color, isActive = false) {
  const canvas = createCanvas(canvasSize, canvasSize);
  const ctx = canvas.getContext('2d');
  
  // 清空画布
  ctx.clearRect(0, 0, canvasSize, canvasSize);
  
  // 设置样式
  ctx.fillStyle = isActive ? '#ff6146' : '#666666';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.font = `${iconSize}px Arial`;
  
  // 绘制文本
  const text = name === 'home' ? '首' : (name === 'category' ? '类' : '我');
  ctx.fillText(text, canvasSize / 2, canvasSize / 2);
  
  // 保存图片
  const fileName = isActive ? `${name}-active.png` : `${name}.png`;
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync(`${outputDir}/${fileName}`, buffer);
  
  console.log(`Created ${fileName}`);
}

// 生成图标
createIcon('home', '#666666', false); // 首页常规图标
createIcon('home', '#ff6146', true);  // 首页激活图标
createIcon('category', '#666666', false); // 分类常规图标
createIcon('category', '#ff6146', true);  // 分类激活图标
createIcon('profile', '#666666', false); // 我的常规图标
createIcon('profile', '#ff6146', true);  // 我的激活图标

console.log('All tabBar icons generated successfully!');
*/

/**
 * 实际项目中，应该将设计师提供的图标放置在 src/assets/images/tabbar 目录下，包括：
 * - home.png：首页未选中图标
 * - home-active.png：首页选中图标
 * - category.png：分类未选中图标
 * - category-active.png：分类选中图标
 * - profile.png：我的未选中图标
 * - profile-active.png：我的选中图标
 */ 